<template>
	<view class="health-detail-page">
		<!-- 返回按钮 -->
		<view class="back-btn" @click="handleBack">
			<image class="back-icon" src="/static/mine/right-black.png"></image>
		</view>
		<view class="title-section">
			<!-- 添加文字阴影 -->
			<text class="main-title" style="text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);">健康信息列表</text>
			<text class="main-title-small">{{time}}</text>
		</view>
		<view class="line"></view>
		<scroll-view  class="info-section" scroll-y="true" enable-flex="true">
			<!-- 目前状况分析部分 -->
			<view class="info-category">
				<text class="category-title" user-select="true">目前状况分析</text>
				<text class="info-paragraph" user-select="true">{{ healthInfo.currentStatus}}</text>
			</view>
			<!-- 未来状况预测部分 -->
			<view class="info-category">
				<text class="category-title" user-select="true">未来状况预测</text>
				<text class="info-paragraph" user-select="true">{{ healthInfo.futurePrediction}}</text>
			</view>
			<!-- 改善建议部分 -->
			<view class="info-category">
				<text class="category-title" user-select="true">改善建议</text>
				<text class="info-paragraph" user-select="true">{{ healthInfo.improvementSuggestions }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 获取当前时间
	const date = new Date();
	const year = ref(date.getFullYear());
	const month = ref(date.getMonth() + 1);
	const day = ref(date.getDate());
	const time = ref(`${year.value}年${month.value}月${day.value}日`);
	const healthInfo = ref({});

	// 接收 camera 页面传过来的数据，这里暂时保留原逻辑，若有数据会覆盖模拟数据
	onLoad((options) => {
		try {
			if (options.healthInfo) {
				healthInfo.value = JSON.parse(decodeURIComponent(options.healthInfo));
			}
		} catch (error) {
			console.error("解析数据时出错", error);
		}
	});

	// 返回上一页
	const handleBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.health-detail-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding:60rpx 20rpx;
		/* 添加背景渐变 */
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		overflow-y: auto;
	}

	/* 返回按钮 */
	.back-btn {
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
	}

	.back-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.title-section {
		text-align: left;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		margin-bottom:20rpx;
		padding: 20rpx;
	}

	.main-title-small {
		font-size: 34rpx;
		color: #666;
	}

	.main-title {
		font-size: 34rpx;
		color: #2569B7;
		font-weight: bold;
	}

	.line {
		/* 美化分割线 */
		height: 2rpx;
		background-color: #ddd;
		margin-bottom: 40rpx;
	}

	.info-section {
		flex:1;
		display: flex;
		flex-flow: column nowrap;
		gap: 30rpx;
		/* 添加项与项之间的间距 */
	}

	.info-category {
		padding: 20rpx;
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 0.5);
		margin-bottom: 40rpx;
		word-wrap: break-word;
	}

	.category-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #2569B7;
		margin-bottom: 20rpx;
		display: block;
	}

	.info-paragraph {
		font-size:26rpx;
		line-height: 1.6;
		color: #333;
		word-wrap: break-word;
	}

	/* 移除卡片相关样式 */
	.card {
		border-bottom: none;
	}

	.card:hover {
		transform: none;
	}

	/* 定义淡入动画 */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.5s ease;
	}

	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}
</style>